import React from "react";
import "./index.less";

const getDate = [
  {
    title: "热销单品",
    list: [
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "储物柜",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "照明灯",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "抱枕",
      },
      {
        imgUrl:
          "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        textName: "镜子",
      },
    ],
  },
  {
    title: "家庭常用",
    list: [
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "落地灯",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "置物架",
      },
      {
        imgUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        textName: "矮脚灯",
      },
      {
        imgUrl:
          "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        textName: "毛巾",
      },
    ],
  },
];

export default class Comtiys extends React.Component {
  divList = () => {
    return (
      <>
        {getDate.map((item,index) => {
          return (
            <div key={index}>
              <p >{item.title}</p>
              <ul className="mians" >
                {item.list.map((item1) => {
                  return (
                    <li key={item1.textName}>
                      <div className="divImg" >
                        <img src={item1.imgUrl} alt="" />
                      </div>
                      <p>{item1.textName}</p>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
      </>
    );
  };

  render() {
    return (
      <div className="comtiy">
        <div className="nav">
          <ul className="ulList">
            <li>新品上市</li>
            <li>二手商城</li>
          </ul>
        </div>
        <div className="main">
          {this.divList()}
          {/* <p>热销单品</p>
                    <ul className="mians">
                        <li>
                            <div className="divImg"><img src="" alt="" /></div>
                            <p>储物柜</p>
                        </li>
                        <li>
                            <div className="divImg"><img src="" alt="" /></div>
                            <p>储物柜</p>
                        </li>
                        <li>
                            <div className="divImg"><img src="" alt="" /></div>
                            <p>储物柜</p>
                        </li>
                        <li>
                            <div className="divImg"><img src="" alt="" /></div>
                            <p>储物柜</p>
                        </li>
                    </ul> */}
        </div>
      </div>
    );
  }
}
